<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/* 结合实际html结构。统配【合理】 */
			*{
				font: 16px "微软雅黑";
				/* 去掉外边距 */
				margin: 0px;
				padding: 0px;
				/* 无序序列：有样式----去一个样式：列表项 */
				list-style-type: none;
				/* 无序列表：有样式---【理解：简写】
				 去全部样式：list-style-type 去列表样式
				            list-style-position: 去列表项标记位置样式;
							list-style-image: 去列表项图片标记样式;
							*/
				list-style: none;
			}
		/* 左栏效果
		1.左栏空间区域 235*460 背景颜色
		2.左栏区域内容【li】加权 235*50 相对定位---挂靠点【固定位置】
		3.给每一个区域加内容【li】加鼠标移动上去改背景颜色
		4.左栏弹出框：400*450 加1像素边框，加绝对定位-微调
		 */
		aside{
			width: 265px;
			height: 530px;
			background: #ababab;
		}
		aside ul.sidebar li{
			width: 235px;
			height: 50px;
			/* 相对定位---挂靠点 */
			position: relative;
			text-align: left;
			line-height: 50px;
			top: 15px;
			backgr ound: #ff00ff;
			/* 内边距 宽度增加 */
			padding-left: 30px;
		}
		aside ul.sidebar li:hover{
			background: #eee;
		}
		
		/* 新增 */
		aside ul.sidebar li span{
			border:0px solid red;
			/* position: absolute;
			left: 215px; */
			float: right;
			/* 加间距 内边距 */
			padding-right: 30px;
			line-height: 50px;
		}
		</style>
		<script src="jquery-1.11.1(1).js"></script>
	</head>
	<body>
		<!-- html结构、结构化标记 【语义化标签】
		 aside元素 针对：左栏、广告、弹出效果...有利于SEO的优化
		 之前版本通过div+id起名的方式【缺点：繁琐、定义起名，沉余】
		  -->
		  <aside>
			  <ul class="sidebar">
				  <!-- 弹出框 -->
				  <div class="out"></div>
				  <li>手机 平板电脑 电话卡 <span>></span></li>
				  <li>电脑 路由器 <span>></span></li>
				  <li>男装 潮衣 <span>></span></li>
				  <li>女装 美妆 <span>></span></li>
				  <li>童装 米兔 <span>></span></li>
				  <li>黑奴 贸易 <span>></span></li>
				  <li>雷军火箭筒 芙蓉王 <span>></span></li>
				  <li>母婴用品 <span>></span></li>
				  <li>想不到了 <span>></span></li>
				  <li>贴膜 其他配件 <span>></span></li>
			  </ul>
		  </aside>
		  <script>
			  //左栏的弹出与隐藏  。hover事件源+css函数
			  //选择器：li
			  $("aside ul.sidebar li").hover(function(){
				  /* 弹出框默认：隐藏---hover悬停第一件事：显示*/
				  $("aside ul.sidebar div.out").css("display","block");
			  },function(){
				  $("aside ul.sidebar div.out").css("display","none");
			  });
		  </script>
	</body>
</html>
<!-- 事件源 。hover（）   切换效果与css悬停hover一致
                        语法：.hover(function(){},function(){})-->